<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ViewUI example</title>
<link rel="stylesheet" type="text/css" href="/static/iview/styles/iview.css" />
<script type="text/javascript" src="/static/js/vue.min.js"></script>
<script type="text/javascript" src="/static/iview/iview.min.js"></script>
<script type="text/javascript" src="/static/axios/axios.min.js"></script>

<style>
.layout {
	border: 1px solid #d7dde4;
	background: #f5f7f9;
	position: relative;
	border-radius: 4px;
	overflow: hidden;
}

.layout-header-bar {
	background: #fff;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
</style>


</head>
<body>
	<div id="app">
		<div class="layout">
			<Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
			<i-menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
				<Submenu name="1"> 
				<template slot="title"> <Icon type="ios-navigate"></Icon> Item 1 </template> 
				<i-menu-item name="1-1">Option 1</i-menu-item> <i-menu-item name="1-2">Option
				2</i-menu-item> <i-menu-item name="1-3">Option 3</i-menu-item> 
				</Submenu>
				<Submenu name="2"> <template slot="title"> <Icon type="ios-keypad"></Icon> Item 2 </template> <MenuItem name="2-1">Option 1</MenuItem> <MenuItem name="2-2">Option
				2</MenuItem> </Submenu>
				<Submenu name="3"> <template slot="title"> <Icon type="ios-analytics"></Icon> Item 3 </template> <MenuItem name="3-1">Option 1</MenuItem> <MenuItem name="3-2">Option
				2</MenuItem> </Submenu>
			</i-menu>
			</Sider>
			<Layout :style="{marginLeft: '200px'}"> <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header> <Content
				:style="{padding: '0 16px 16px'}"> <Breadcrumb :style="{margin: '16px 0'}"> <BreadcrumbItem>Home</BreadcrumbItem> <BreadcrumbItem>Components</BreadcrumbItem>
			<BreadcrumbItem>Layout</BreadcrumbItem> </Breadcrumb> <Card>
			<div style="height: 600px">Content</div>
			</Card> </Content> </Layout>
		</div>
	</div>
	<script>
		new Vue({
			el : '#app',
			data : {},
			methods : {}
		})
	</script>
</body>
</html>